<!doctype html>
<html lang="en">
<head>
    <title>Expander - Expand Direction</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <link type="text/css" href="../../themes/wijmo/jquery.wijmo.wijutil.css" rel="stylesheet" />
    <link type="text/css" href="../../themes/wijmo/jquery.wijmo.wijexpander.css" rel="stylesheet" />
    <script type="text/javascript" src="../../wijmo/jquery.wijmo.wijutil.js"></script>
    <script type="text/javascript" src="../../wijmo/jquery.wijmo.wijexpander.js"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#expander").wijexpander({expandDirection: "top"});
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Expand Direction</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="expander">
                <h3>
                    header
                </h3>
                <div>                    
                    wijexpander widget allows the user to show or hide any embedded or external content by clicking on an expander header.                    
                </div>
            </div>           
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <div style="clear:both;float:none;">&nbsp;</div>
                <label for="selEasing2">
                    Easing</label>
                <select id="expandDirection" onchange="applyOptions()" onclick="applyOptions()">
                    <option value="top" selected="selected">top</option>
                    <option value="right">right</option>
                    <option value="bottom">bottom</option>
                    <option value="left">left</option>
                </select>
                <script type="text/javascript" language="javascript">
                    function applyOptions() {
                        $("#expander").wijexpander("option", "expandDirection", $("#expandDirection").get(0).value);
                    }    
                </script>
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
            </p>
        </div>
    </div>
</body>
</html>
